<template>
	<view>
		<view class="head_bg">
			<view class="head_bg_box"></view>
		</view>
		<view class="income-setting-wrap w-full">
			
		</view>
		<view class="income-user-wrap w-full">
			<view class="flex px-4 justify-between mb-2">
				<view><image src="/static/logo.png" class="icon-img-50 rounded-full	"></image></view>
				<view class="ml-1 flex-1">
					<view class="text-color-white">昵称未设置</view>
					<view class="text-color-white">会员名：xx****12</view>
					<view class="font-size-sm">关注 10  |  粉丝 2</view>
				</view>
				<view>
					<view class="flex bg-color-red justify-center justify-items-center items-center p-1 rounded-lg">
						<view class="iconfont iconfont-mine-shopping-cart icon-img-24"></view>
						<view class="iconfont iconfont-setup icon-img-24 ml-2"></view>
					</view>
				</view>
			</view>
			<view class="px-4">总共赚了 ￥10000.00</view>
		</view>
		<view class="income-data-wrap flex flex-col justify-between rounded-lg">
			<view class="flex flex-1 px-4 flex-col justify-center justify-items-center items-center mt-2">
					<view class="flex justify-between justify-items-center items-center w-full">
						<view class="flex flex-col justify-center justify-items-center items-center">
							<image src="/static/imgs/mine/collect.png" class="icon-img-32"></image>
							<view class="mt-1">我收藏的</view>
						</view>
						<view class="flex flex-col justify-center justify-items-center items-center ml-5">
							<image src="/static/imgs/mine/release.png" class="icon-img-32"></image>
							<view class="mt-1">我发布的</view>
						</view>
						<view class="flex flex-col justify-center justify-items-center items-center ml-5">
							<image src="/static/imgs/mine/buy.png" class="icon-img-32"></image>
							<view class="mt-1">我买到的</view>
						</view>
						<view class="flex flex-col justify-center justify-items-center items-center ml-5">
							<image src="/static/imgs/mine/sell.png" class="icon-img-32"></image>
							<view class="mt-1">我卖出的</view>
						</view>
					</view>
			</view>
		</view>
		<view class="income-mine-wrap">
			<view class="px-4">
				<view class="flex justify-between mt-2 function-wrap">
					<view class="left-box flex flex-row justify-center justify-items-center items-center rounded-lg">
						<view class="iconfont iconfont-wallet icon-img-32"></view>
						<view class="text-color-white">
							<view>我的钱包</view>
							<view>￥120.00</view>
						</view>
					</view>
					<view class="right-box">
						<view class="right-top-box flex flex-row justify-center justify-items-center items-center rounded-lg">
							<view class="iconfont iconfont-help icon-img-32"></view>
							<view class="text-color-white">帮助中心</view>
						</view>
						<view class="right-bottom-box flex flex-row justify-center justify-items-center items-center rounded-lg">
							<view class="iconfont iconfont-feedback icon-img-32"></view>
							<view class="text-color-white">意见反馈</view>
						</view>
					</view>
				</view>
				<view class="py-2">
					<view class="title">其他服务</view>
				</view>
				<view class="flex justify-between">
					<view class="service-left-box flex justify-center justify-items-center items-center rounded-lg">
						<view class="iconfont iconfont-appraisal icon-img-32"></view>
						<view class="text-color-white">鉴定服务</view>
					</view>
					<view class="service-right-box flex justify-center justify-items-center items-center rounded-lg">
						<view class="iconfont iconfont-nursing icon-img-32"></view>
						<view class="text-color-white">护理服务</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.head_bg{ 
	width: 100%; 
	height: 304rpx;  
}
.head_bg_box{
	//background-color: #8A38F5; 
	width: 100%; 
	height: 304rpx; 
	background-image: url('/static/imgs/mine/bg-top.png');
}
.income-setting-wrap{
	z-index: 1;
	position: absolute; 
	height: 100rpx; 
	margin-top: -304rpx;
}
.income-user-wrap{
	z-index: 1;
	position: absolute; 
	height: 200rpx; 
	margin-top: -250rpx; 
}
.income-data-wrap{
	z-index: 1; 
	position: absolute; 
	width: 92%; 
	//height: 240rpx; 
	padding:40rpx 0;
	margin: -80rpx 4% 0 4%; 
	background: #fff; 
	//box-shadow: 0 4rpx 20rpx 0 #8A38F5; 
	//border-radius: 10rpx; 
}
.income-mine-wrap{
	z-index: 1;
	position: absolute; 
	margin-top: 140rpx; 
	width: 100%;
}
.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.left-box{
	//height: 90rpx;
	//height:260rpx;
	position: relative;
	flex: 1;
	z-index: 5;
	padding: 20rpx;
	//background:#ff0000;
	background-image: linear-gradient(to bottom right, #FBD904, #FFE752);
}
.right-box{
	//height: 90rpx;
	position: relative;
    flex: 1;
    z-index: 5;
	//margin-left: 10rpx;
	//padding: 20rpx;
}
.function-wrap{
	height:260rpx
}
.right-top-box{
	height: 120rpx;
	//background:#55aa00;
	margin-left: 20rpx;
	background-image: linear-gradient(to bottom right, #FBD904, #FFE752);
}
.right-bottom-box{
	height: 120rpx;
	//background:#ffaaff;
	margin-left: 20rpx;
	margin-top: 20rpx;
	background-image: linear-gradient(to bottom right, #FBD904, #FFE752);
}
.service-left-box{
	position: relative;
	flex: 1;
	z-index: 5;
	padding: 20rpx;
	//background:#ff0000
	background-image: linear-gradient(to bottom right, #FBD904, #FFE752);
}
.service-right-box{
	position: relative;
    flex: 1;
    z-index: 5;
	//background:#ffaaff;
	margin-left: 20rpx;
	background-image: linear-gradient(to bottom right, #FBD904, #FFE752);
}
</style>
